<template>
  <div class="dashboard">
    <div class="dashboard-zoom" v-if="operationList.includes('businessData:view') ">
      <div class="dashboard_change">
        <div class="dashboard_change_botton dashboard_change_botton_left"
          :class="totalChooseType == 1 ? 'dashboard_change_botton_choose' : ''" @click="changeChooseType(1)">
          <div>签单</div>
        </div>
        <div class="dashboard_change_botton dashboard_change_botton_right"
          :class="totalChooseType == 2 ? 'dashboard_change_botton_choose' : ''" @click="changeChooseType(2)">
          <div>商务</div>
        </div>
      </div>
      <div class="dashboard_left" v-if="totalChooseType == 1">
        <totalOrder :operationList="operationList"></totalOrder>
      </div>
      <div class="dashboard_right" v-if="totalChooseType == 2">
        <totalBusiness></totalBusiness>
      </div>

    </div>
    <div v-if="userInfo && userInfo.role && (userInfo.role.includes(50) || userInfo.role.includes(51))">
      <permission></permission>
    </div>
  </div>
</template>

<script>
import totalOrder from "@/views/homePage/dashboard/TotalOrder";
import totalBusiness from "@/views/homePage/dashboard/TotalBusiness";
import permission from "@/views/homePage/dashboard/includes/permission/Permission";

export default {
  name: "Dashboard",
  components: {
    totalOrder,
    totalBusiness,
    permission,
  },
  props: {
    operationList: Array,
  },
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem('mujinguserInfo')),
      totalChooseType: 1,
      dialogShow: 0,
      style: {
        minWidth: "1920px",
        minHeight: "100vh",
        height: "1312px",
      },
      dashboardStyle: {},
      dashboardStyle1: {},
      zoomStyle: {},
      deviceNum: {
        deviceTotalNum: 0,
        deviceFaultTotalNum: 0,
        devicePowerTotalNum: 0,
        deviceRunTotalNum: 0,
        deviceStandByTotalNum: 0,
        deviceOffTotalNum: 0
      },
      deviceTypeList: [],
      faultLogList: [],
      rate: {},
      dashboardMsg: {},
      typeChoose: 1,
      warnList: [],
      chooseProvince: '',
      dashboardWidth: 1920,
    };
  },
  activated() {
    let windowWidth = document.body.clientWidth;
    this.dashboardWidth = windowWidth * 0.95 - 180;

    this.getWindowSize();
    addEventListener("resize", this.getWindowSize);
  },
  deactivated() {
    removeEventListener("resize", this.getWindowSize);
  },
  methods: {
    changeChooseType(e){
      this.totalChooseType = e
    },
    changeProvinceCity(val) {
      this.chooseProvince = val
      this.getDashboardMsg()
    },
    chooseCity(val){
      this.chooseProvince = val
      this.getDashboardMsg()
    },
    chooseType(val){
      console.log("--------",val)
      this.typeChoose = val
    },
    getDashboardMsg() {
    },
    drawStar() {
      // 绘制星星
      var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        w = (canvas.width = document.body.offsetWidth - 10),
        h = (canvas.height = document.body.offsetHeight - 30),
        hue = 217,
        stars = [],
        count = 0,
        maxStars = 700; //鏄熸槦鏁伴噺

      var canvas2 = document.createElement("canvas"),
        ctx2 = canvas2.getContext("2d");
      canvas2.width = 100;
      canvas2.height = 100;
      var half = canvas2.width / 2,
        gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half); //缁樺埗涓€涓煩褰紝骞剁敤鏀惧皠鐘�/鍦嗗舰娓愬彉杩涜濉厖锛�
      gradient2.addColorStop(0.025, "#CCC");
      gradient2.addColorStop(0.1, "hsl(" + hue + ", 61%, 33%)"); //HSLA锛坋.g:鈥渉sla(0,50%,50%,0)鈥濓級鏄疌SS3鐨勬柊澧炲睘鎬у€硷紝鍏朵腑H浠ｈ〃鑹茬浉锛堝€煎湪0~360涔嬮棿锛夛紝S鍜孡鍒嗗埆浠ｈ〃楗卞拰搴﹀拰浜害锛堝€煎湪0%~100%涔嬮棿锛夈€�
      gradient2.addColorStop(0.25, "hsl(" + hue + ", 64%, 6%)");
      gradient2.addColorStop(1, "transparent");
      //addColorStop 娓愬彉濉厖
      ctx2.fillStyle = gradient2;
      ctx2.beginPath();
      ctx2.arc(half, half, half, 0, Math.PI * 2);
      ctx2.fill();

      // End cache

      function random(min, max) {
        if (arguments.length < 2) {
          max = min;
          min = 0;
        }

        if (min > max) {
          var hold = max;
          max = min;
          min = hold;
        }

        return Math.floor(Math.random() * (max - min + 1)) + min;
      }

      function maxOrbit(x, y) {
        var max = Math.max(x, y),
          diameter = Math.round(Math.sqrt(max * max + max * max));
        return diameter / 2;
        //鏄熸槦绉诲姩鑼冨洿锛屽€艰秺澶ц寖鍥磋秺灏忥紝
      }

      var Star = function() {
        this.orbitRadius = random(maxOrbit(w, h));
        this.radius = random(60, this.orbitRadius) / (8 * 2);
        //鏄熸槦澶у皬
        this.orbitX = w / 2;
        this.orbitY = h / 2;
        this.timePassed = random(0, maxStars);
        this.speed = random(this.orbitRadius) / (50000 * 5 * 50);
        //鏄熸槦绉诲姩閫熷害
        this.alpha = random(2, 10) / 10;

        count++;
        stars[count] = this;
      };

      Star.prototype.draw = function() {
        var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
          y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
          twinkle = random(10);

        if (twinkle === 1 && this.alpha > 0) {
          this.alpha -= 0.05;
        } else if (twinkle === 2 && this.alpha < 1) {
          this.alpha += 0.05;
        }

        ctx.globalAlpha = this.alpha;
        ctx.drawImage(
          canvas2,
          x - this.radius / 2,
          y - this.radius / 2,
          this.radius,
          this.radius
        );
        this.timePassed += this.speed;
      };

      for (var i = 0; i < maxStars; i++) {
        new Star();
      }

      function animation() {
        ctx.globalCompositeOperation = "source-over";
        ctx.globalAlpha = 0.5; //灏惧反
        ctx.fillStyle = "hsla(" + hue + ", 64%, 6%, 2)";
        ctx.fillRect(0, 0, w, h);

        ctx.globalCompositeOperation = "lighter";
        for (var i = 1, l = stars.length; i < l; i++) {
          stars[i].draw();
        }

        window.requestAnimationFrame(animation);
      }

      animation();
    },
    isIE() {
      return navigator.userAgent.toLowerCase().indexOf("trident") > -1
        ? true
        : false;
    },
    getWindowSize() {
      // 计算zoom
      let windowWidth = document.body.clientWidth;
      let documentWidth = 1920;
      let availH = window.screen.availHeight + "px"
      let zoomScale;
      if (!this.isIE()) {
        //detectIE() 判断是否是ie，自行百度方法
        if (windowWidth <= 1440) {
          windowWidth = 1440;
          this.dashboardStyle = {
            width: "1440px"
          };
          this.dashboardStyle1 = {
            height: availH
          };
        } else {
          this.dashboardStyle = {
            width: "100%"
          };
          this.dashboardStyle1 = {
            height: availH
          };
        }
        zoomScale = windowWidth / documentWidth;
        console.log(windowWidth, documentWidth)
        this.zoomStyle = {
          zoom: zoomScale
        };
      } else {
        zoomScale = 1;
        windowWidth = 1900;
      }
    },
    showDialog(index) {
      // 隐藏滚动条
      if (index) {
        this.style = {
          minWidth: "100vw",
          minHeight: "100vh",
          height: "100vh",
          overflow: "hidden"
        };
      } else {
        this.style = {
          minWidth: "1920px",
          minHeight: "100vh",
          height: "1312px"
        };
      }
      this.dialogShow = index;
    }
  }
};
</script>
<style scoped>
.dashboard_change{
  display: flex;
  justify-content: flex-end;
  margin-top: -10px;
}
.dashboard_change_botton{
  border: 1px solid #253B8A;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  padding: 5px 10px;
}
.dashboard_change_botton_left{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0px;
}
.dashboard_change_botton_right{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.dashboard_change_botton_choose{
  color: white;
  background-color: #253B8A;
}
.dashboard_left{
  height: 100%;
  width: 95%;
}
.dashboard_right{
  width: 90%;
  height: auto;
}
</style>

<style lang="sass" scoped>
.dashboard
  //min-width: 1920px
  //background: rgb(13, 22, 48)
  position: relative
  height: 100vh
  /* background: url(~images/indexBg.png) no-repeat center center */
  background-size: 100% 100%
  .star
    position: absolute
    top: 0
    left: 0
    height: 100%
    z-index: -1
    display: none
  .dashboard-zoom
    //height: 100%
    //height: 1297px
    .dashboard-content
      width: 100%
      height: 100%
      margin: 0 auto
      position: relative
.left_div
  width: 473px
  height: 94%
  position: absolute
  top: 10%
  z-index: 9
  left: 0
  background: rgba(8, 10, 32, 1)
.right_div
  width: 501px
  height: 94%
  position: absolute
  z-index: 9
  top: 10%
  right: 0
  background: rgba(8, 10, 32, 1)
</style>
